<template>
  <div id="paginate" v-cloak>
    <ul class="pagination clear">
      <li>
        <span class="shouye nokexuan" v-if="currentPage == 1">首页</span>
        <span class="shouye kexuan" v-else @click="next(1)">首页</span>
      </li>
      <li v-if="currentPage<=1">
        <span class="nokexuan">
          <i class="fa fa-chevron-left" aria-hidden="true"></i>
        </span>
      </li>
      <li v-else>
        <span class="noactive kexuan" @click="next(currentPage-1)">
          <i class="fa fa-chevron-left" aria-hidden="true"></i>
        </span>
      </li>
      <li v-for="(item, index) in pagingList" :key="index">
        <span class="active" v-if="currentPage==item.key">{{item.key}}</span>
        <span v-else-if="sign ==item.key && currentPage>1">{{item.key}}</span>
        <span v-else class="noactive" @click="next(item.value)">{{item.key}}</span>
      </li>
      <li v-if="currentPage>=totalPageCount">
        <span class="nokexuan">
          <i class="fa fa-chevron-right" aria-hidden="true"></i>
        </span>
      </li>
      <li v-else>
        <span class="noactive kexuan" @click="next(currentPage+1)">
          <i class="fa fa-chevron-right" aria-hidden="true"></i>
        </span>
      </li>
      <li>
        <span class="dao">
          到
          <input v-model="tiaoyema" /> 页
        </span>
        <span class="GO kexuan" @click="tiao">GO</span>
      </li>
      <li>
        <span class="shouye nokexuan" v-if="totalPageCount == currentPage">尾页</span>
        <span class="shouye kexuan" v-else @click="next(totalPageCount)">尾页</span>
      </li>
    </ul>
  </div>
</template>
<style  scoped>
#paginate {
  text-align: center;
  /* background-color: #cccccc; */
}

#mylink {
  color: #efefef;
}

.pagination {
  padding-top: 2px;
  list-style: none;
  text-align: center;
}

ul li span {
  float: left;
  width: 26px;
  height: 26px;
  line-height: 28px;
  border-radius: 50%;
  cursor: pointer;
}

ul li span.shouye {
  width: 60px;
  border-radius: 5px;
}

ul li span.dao {
  width: 90px;
}
ul li span.GO {
  border-radius: 5px;
  width: 36px;
}
ul li span.dao input {
  width: 32px;
  height: 28px;
  border: 1px solid #999;
  border-radius: 5px;
  outline: none;
}

.active {
  background: #16dcb8;
  color: white;
}
.kexuan {
  border: 1px solid #16dcb8;
  color: #16dcb8;
}
.kexuan:hover {
  /* background: #87d6c8; */
  background: #16dcb8;
  color: white;
}

ul li span.nokexuan {
  background: #ccc;
  color: white;
  border: 1px solid #ccc;
}

.pagination > li {
  float: left;
  margin: 0 5px;
}

.clear:after {
  content: "";
  display: block;
  clear: both;
}
[v-cloak] {
  display: none;
}
</style>
<script>
export default {
  props: ["zongyeshuo"],
  computed:{
    count () {
      return this.$store.state.zongye
    }
  },
  data() {
    return {
      // 省略的符号
      sign: "...",
      // 省略号位置
      signIndex: 4,
      // 总页数
      totalPageCount:this.$store.state.zongye|| 10,
      // 跳转页面
      tiaoyema: "",
      // 当前页,
      currentPage: 1,
      // 显示在页面的数组列表
      pagingList: []
    };
  },
  methods: {
    // 跳转到某页码
    tiao() {
      this.currentPage = this.tiaoyema;
    },
    next(num) {
      var that = this;
      if (num <= 1) that.currentPage = 1;
      else if (num >= that.totalPageCount) {
        that.currentPage = that.totalPageCount;
      } else that.currentPage = num;
    },
    // 初始化数据
    fetchData() {
      var that = this;
      that.pagingList = [];
      var tmp = null;
      if (that.totalPageCount > 6) {
        if (
          that.totalPageCount - 1 === that.totalPageCount - that.currentPage &&
          that.totalPageCount - that.currentPage > 5
        ) {
          for (var i = 1; i < 7; i++) {
            if (i < that.signIndex) {
              tmp = { key: i, value: i };
            } else if (i === that.signIndex) {
              tmp = { key: that.sign, value: 0 };
            } else if (i === that.signIndex + 1) {
              tmp = {
                key: that.totalPageCount - 1,
                value: that.totalPageCount - 1
              };
            } else {
              tmp = { key: that.totalPageCount, value: that.totalPageCount };
            }
            that.pagingList.push(tmp);
          }
        } else if (that.totalPageCount - that.currentPage <= that.signIndex) {
          var starNum = that.totalPageCount - 5;
          for (i = starNum; i < starNum + 6; i++) {
            tmp = { key: i, value: i };
            that.pagingList.push(tmp);
          }
        } else {
          let starNum = that.currentPage - 1;
          for (i = 1; i < 7; i++) {
            if (i < that.signIndex) {
              tmp = { key: starNum - 1 + i, value: starNum - 1 + i };
            } else if (i === that.signIndex) {
              tmp = { key: that.sign, value: 0 };
            } else if (i === that.signIndex + 1) {
              tmp = {
                key: that.totalPageCount - 1,
                value: that.totalPageCount - 1
              };
            } else {
              tmp = { key: that.totalPageCount, value: that.totalPageCount };
            }
            that.pagingList.push(tmp);
          }
        }
      } else {
        for (i = 0; i < that.totalPageCount; i++) {
          tmp = { key: i + 1, value: i + 1 };
          that.pagingList.push(tmp);
        }
      }
    },
    init() {
      var that = this;
      that.fetchData();
    }
  },
  mounted() {
    this.totalPageCount = this.$store.state.zongye;
    var that = this;
    that.init();
  },
  watch: {
    count(val){
      this.totalPageCount=val
    },
    totalPageCount(val) {
      var that = this;
      if (!val || val === "") return;
      // that.currentPage = 1;
      // if(that.currentPage-1==val){
      // that.currentPage =that.currentPage- 1;
      // window.console.log(that.currentPage)
      // }
      // window.console.log(that.currentPage)
      that.init();
    },
    currentPage(e) {
/*       this.$store.commit('dangqianyema', Number(val))
      window.console.log(this.$store.state.a) */
      this.$emit('danqainye', e);
      var that = this;
      that.init();
    }
  }
};
</script>
